<template>
    <div class="gather-container yuan-container">
        <PageTopVue :detailInfo="formData" v-if="formData.id" @tplChange="tplChange" />
        <div class="page-main">
            <div class="yuan-form info-form">
                <div class="form-item-panel-title">采集管理</div>
                <div class="form-item">
                    <span class="form-label must-label">采集地点：</span>
                    <input class="form-input" v-model="formData.gatherPlace" placeholder="请输入采集地点">
                </div>
                <div class="form-item">
                    <span class="form-label must-label">采集人：</span>
                    <input class="form-input" v-model="formData.gatherer" placeholder="请输入采集人">
                </div>
                <div class="form-item">
                    <span class="form-label must-label">采集时间：</span>

                    <span class="p-t-t-info form-date iconfont" @click="showPlantDatePicker=true"
                        v-if="formData.gatherTime">{{formData.gatherTime}}</span>
                    <span class="p-t-t-info form-date form-placeholder iconfont" @click="showPlantDatePicker=true"
                        v-else>请选择采集时间</span>
                    <van-popup v-model="showPlantDatePicker" position="bottom">
                        <van-datetime-picker v-model="defPlantDate" type="date" @cancel="showPlantDatePicker = false"
                            @confirm="onPlantDateConfirm" />
                    </van-popup>
                </div>
            </div>
            <div class="yuan-form info-form">
                <div class="form-item-panel-title">初加工管理</div>
                <div class="form-item form-item-row">
                    <span class="form-label must-label">初加工流程：</span>
                    <textarea class="form-textarea" :rows="5" v-model="formData.processFlow" placeholder="请输入初加工流程" />
                </div>
                <div class="form-item form-item-row">
                    <span class="form-label">初加工图片：</span>
                    <UploadVue @change="processChange" :defImgList="[]" :limit="1" />
                </div>

            </div>
            <div class="yuan-btn primary-btn submit-btn" @click="save">保存</div>
        </div>

    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import PageTopVue from "@/components/PageTop.vue";
import area from "@/util/area";
import myApi from "@/api/myApi";
import UploadVue from "@/components/Upload.vue";
import toast from "@/util/toast/toast";
import { format } from "@/util";
@Component({
    name: "tpl",
    components: { PageTopVue, UploadVue },
})
export default class extends Vue {
    pageType = "basic";
    showAreaPicker = false;
    areaList = area;
    formData: any = {};
    showPlantDatePicker = false;
    pageId = "";
    defPlantDate = new Date();
    mounted() {
        const id = this.$route.query.id;
        if (id) {
            this.pageId = id + "";
            this.getDetail();
        }
    }
    async getDetail() {
        const loading = toast.showLoading();
        try {
            const res = await myApi.getRawInboundDetail({ id: this.pageId });
            this.formData = res.data;
        } finally {
            toast.hideLoading(loading);
        }
    }
    processChange(files: { url: string }[]) {
        this.formData.processPicture = files[0]?.url || "";
    }
    tplChange(id: string) {
        this.formData.templateId = id;
    }
    onPlantDateConfirm(e: Date) {
        this.formData.gatherTime = format(e, "yyyy-MM-dd");
        this.showPlantDatePicker = false;
    }

    async save() {
        if (!this.formData.gatherPlace) {
            this.$notify({ type: "danger", message: "请输入采集地点" });
            return;
        }
        if (!this.formData.gatherer) {
            this.$notify({ type: "danger", message: "请输入采集人" });
            return;
        }
        if (!this.formData.gatherTime) {
            this.$notify({ type: "danger", message: "请选择采集时间" });
            return;
        }
        if (!this.formData.processFlow) {
            this.$notify({ type: "danger", message: "请输入初加工流程" });
            return;
        }
        const loading = toast.showLoading();
        try {
            const res = await myApi.addRawInfo(this.formData);
            this.$notify({ type: "success", message: res.msg });
            this.pageType = "senior";
        } finally {
            toast.hideLoading(loading);
        }
    }
}
</script>

<style lang="scss">
.gather-container {
    .page-main {
        padding: 0.24rem 0.24rem 0.5rem 0.24rem;
    }
    .page-type {
        .yuan-btn {
            height: 0.6rem;
            display: inline-flex;
            font-size: 0.28rem;
            margin-right: 0.2rem;
        }
    }
    .info-form {
        background: #fff;
        border-radius: 0.08rem;
        padding: 0.2rem 0;
        margin-bottom: 0.2rem;
    }
    .form-item-panel-title {
        font-size: 0.3rem;
        color: #333;
        padding: 0 0.2rem;
        padding-bottom: 0.2rem;
    }
    .submit-btn {
        height: 0.6rem;
        width: 2rem;
        margin: 0 auto;
        margin-top: 0.5rem;
    }
}
</style>